<template>
	<view class="component-box">
		<view class="h2">房间成员</view>
		<view class="box">
			<view class="item" v-for="item in modelValue" :key="item">
				<view class="item-box">
					<image class="image" src="/static/images/avatar.jpeg"></image>
					<view class="info-box">
						<text class="user-id">{{item.t_admin_pk}}</text>
						<u-icon size="40" name="phone"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		modelValue: {
			type: Array,
			required: true
		}
	})
</script>

<style lang="scss">
	.component-box {

		.box {
			display: flex;
			width: 750rpx;
			flex-wrap: wrap;
			flex-direction: row;

			.item {
				box-sizing: border-box;
				width: 375rpx;
				padding: 10rpx;
				
				.item-box {
					background-color: #acacac;
					display: flex;
					padding: 10rpx;
					flex-direction: column;
					align-items: center;
					border-radius: 10rpx;
					
					.image {
						width: 335rpx;
						height: 335rpx;
					}
					
					.info-box {
						width: 100%;
						padding: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

				
			}
		}
	}
</style>